import React, { useState } from "react";
import { Button, Modal, Checkbox, Form, Input } from "antd";
import type { FormProps } from "antd";
import CascaderCity from './cascaderCity'
import addstyle from "./addstyle.module.scss";
const ADD: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(true);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  type FieldType = {
    username?: string;
    password?: string;
    remember?: string;
  };

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <>
      <Modal
        title="添加网点"
        width={"60%"}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="layout-multiple-horizontal"
          layout="horizontal"
          labelCol={{ style: { width: "150px" } }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="所属公司"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="网点名称"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="网点简称"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
          <div className={addstyle.flex}>
            <Form.Item<FieldType>
              label="网点类型"
              className={addstyle.flex1}
              name="username"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item<FieldType>
              label="经营类型"
              name="username"
              className={addstyle.flex1}
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
            >
              <Input />
            </Form.Item>
          </div>

          <div className={addstyle.flex}>
            <Form.Item<FieldType>
              label="负责人"
              name="username"
              className={addstyle.flex1}
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item<FieldType>
              label="联系电话"
              className={addstyle.flex1}
              name="username"
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
            >
              <Input />
            </Form.Item>
          </div>
          <div className={addstyle.flex}>
            <Form.Item<FieldType>
              label="接货电话"
              name="username"
              className={addstyle.flex1}
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item<FieldType>
              label="提货电话"
              name="username"
              className={addstyle.flex1}
              rules={[
                { required: true, message: "Please input your username!" },
              ]}
            >
              <Input />
            </Form.Item>
          </div>
          <Form.Item<FieldType>
            label="网点地址"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <CascaderCity />
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="备注"
            name="username"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default ADD;
